<template>
  <van-scroll :scroll-x="true" :scroll-y="false" eventPassthrough="vertical" ref="tabScrollRef">
    <div class="tab">
      <div
        class="tab-item"
        :id="'tab' + item.id"
        v-for="(item, index) in list"
        :key="index"
        @click="handleChangeTab(item, index)"
      >
        <div class="tab-item-content">
          {{ item.name }}
          <span class="underline" v-if="tabIndex == index"></span>
        </div>
      </div>
    </div>
  </van-scroll>
</template>

<script setup>
import { ref } from 'vue';
import VanScroll from '@/components/scroll/Scroll.vue';

defineProps({
  list: {
    type: Array,
    default: []
  }
});

const emit = defineEmits(['handleChangeContent']);

const tabScrollRef = ref();
const tabIndex = ref(0);

function handleChangeTab(item, index) {
  tabIndex.value = index;
  if (index > 2) {
    tabScrollRef.value.scrollToElement(`#tab${item.id}`, 600);
  } else {
    tabScrollRef.value.scrollTo(0, 0, 600);
  }
  emit('handleChangeContent', item);
}
</script>

<style lang="less" scoped>
.scroll {
  white-space: nowrap;
  .tab {
    display: inline-block;
    padding: 0 0 20px;
    .tab-item {
      // width: 70px;
      height: 23px;
      padding: 0 15px;
      display: inline-block;
      text-align: center;
      .tab-item-content {
        font-size: 16px;
        line-height: 26px;
        position: relative;
        .underline {
          display: block;
          width: 100%;
          height: 3px;
          border-radius: 3px;
          background-color: #ec4141;
          position: absolute;
          bottom: 0;
          left: 0;
        }
      }
    }
    // .tab-item-active::after {
    //   content: '';
    //   width: 80%;
    //   height: 2px;
    //   background-color: #ec4141;
    //   position: absolute;
    //   bottom: 0;
    //   left: 0;
    // }
  }
}
</style>
